<template>
  <div id="radar" class="mymap"></div>
</template>

<script>
export default {
  data() {
    return {
    }
  },
  props: {
  },
  methods: {
    radar() {
      // 雷达图
      const option = {
        tooltip: {
          show: true,
          // 控制提示框组件的显示位置
          position: ['60%', '10%']
        },
        radar: {
          indicator: [
            { name: '机场', max: 100 },
            { name: '商场', max: 100 },
            { name: '火车站', max: 100 },
            { name: '汽车站', max: 100 },
            { name: '地铁', max: 100 }
          ],
          // 修改雷达图的大小
          radius: '65%',
          shape: 'circle',
          // 分割的圆圈个数
          splitNumber: 4,
          name: {
            // 修饰雷达图文字的颜色
            textStyle: {
              color: '#4c9bfd'
            }
          },
          // 分割的圆圈线条的样式
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255, 0.5)'
            }
          },
          splitArea: {
            show: false
          },
          // 坐标轴的线修改为白色半透明
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.5)'
            }
          }
        },
        series: [
          {
            name: '北京',
            type: 'radar',
            // 填充区域的线条颜色
            lineStyle: {
              normal: {
                color: '#fff',
                width: 1,
                opacity: 0.5
              }
            },
            data: [[90, 19, 56, 11, 34]],
            // 设置图形标记 （拐点）
            symbol: 'circle',
            // 这个是设置小圆点大小
            symbolSize: 5,
            // 设置小圆点颜色
            itemStyle: {
              color: '#fff'
            },
            // 让小圆点显示数据
            label: {
              show: true,
              fontSize: 10
            },
            // 修饰我们区域填充的背景颜色
            areaStyle: {
              color: 'rgba(238, 197, 102, 0.6)'
            }
          }
        ]
      }
      const myChart = this.$echarts.init(document.getElementById('radar'))
      myChart.setOption(option)
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.radar()
    })
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
</style>
